<template>
	<div class="view">
		<div class="dv">
			<div>玩转惠生钱</div>
			<div>今天花钱天天生钱</div>
		</div>
		<!--<img src="../assets/dv.png" class="dvd" id="dvd" @click="dvd" v-show="isShoww">
		<video src="http://file.jhjvip.cn/test/test.mp4" class="shiping" id="shiping" controls="controls" type="video/mp4" v-show="isShow"></video>-->
		<div class="aa">
			<img src="../assets/dv.png" class="dvd" id="dvd" @click="dvd">
			<video src="http://file.jhjvip.cn/test/test.mp4" class="shiping" id="shiping" type="video/mp4"></video>
		</div>
		<div class="content">
			<h2>友惠家是什么</h2>
			<div class="app">一个能让你把花掉的钱继续帮你生钱的app</div>
			<div class="li">你通过友惠家购买京东、淘宝、天猫商品花掉的钱，线下看电影，吃饭、购物花掉的钱，都可以存入惠生钱，每天拿利息。</div>
			<h3>现在支持</h3>
			<div class="tu">
				<img src="../assets/jdt.png">
				<img src="../assets/tdt.png">
				<img src="../assets/tmt.png">
			</div>
			<h3>以后支持</h3>
			<div class="tu" style="border: none;">
				<img src="../assets/418.png">
				<img src="../assets/wph.png">
				<img src="../assets/1hd.png">
			</div>
			<h2 style="margin-top: 0.65rem;">惠生钱怎么玩？</h2>
			<div class="wang">网购消费存入</div>
			<div class="yb">第一步：通过友惠家购买淘宝、天猫、京东商品</div>
			<div class="eb">第二步：消费金额自动全部存入惠生钱包，每天产生收益</div>
			<div class="js">例如你通过友惠家在淘宝花费500元购买了一件衣服，每天大约可赚取0.28元利息，通过超级淘购买20000元商品，每月大约可赚取220元利息，年化利率可高达20%。</div>
			<div class="sj"></div>
		</div>
	</div>
</template>

<script>
//	export default{
//		data(){
//			return{
//				isShow:false,
//				isShoww:true
//			}
//		},
//		methods:{
//			dvd:function(){
//				this.isShow = !this.isShow
//				this.isShoww = !this.isShoww
//			}
//		}
//	}
	export default {
	mounted() {
		window.onload = function() {
			var dvd = document.getElementById('dvd')
			var shiping = document.getElementById('shiping')
			var md=document.getElementsByTagName("video")[0];
		    if(md.ended){
//		        console.log("结束");
		    }
			md.addEventListener("ended",function(){
//		         console.log("结束");
				shiping.style.display = "none"
		    })
			dvd.onclick = function() {
				shiping.style.display = "block"
				shiping.play()
			}
		}
	}
}
</script>

<style scoped="scoped">
	html,body,.view{
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	.dv{
		width: 100%;
		height: 4rem;
		/*background: #FB203F;*/
		/*border-radius: 0 0 50% 50%;*/
		text-align: center;
		padding: 0.4rem 0 0 0;
		background-image: url(../assets/view.png);
		background-size:100%;
		background-position: center;
	}
	#shiping{
		/*width: 4rem;
		height: 2.4rem;*/
		width: 100%;
		height: auto;
		/*margin: 0.5rem 0;*/
		position: absolute;
		top:1.54rem;
		left: 0rem;
		border-radius: 0.4rem;
		display: none;
	}
	.dv div{
		color: #FAD1A1 ;
		font-size: 0.42rem;
		line-height: 0.73rem;
		font-family: "微软雅黑";
	}
	.aa{
		width: 5.7rem;
		height: 5.7rem;
		margin: 0 auto;
		position: relative;
		top: -1.8rem;
		/*left: 1rem;*/
	}
	.dvd{
		width: 5.7rem;
		height: 5.7rem;
		
	}
	.content{
		margin: 0 0.7rem;
		margin-top: -1rem;
	}
	h2{
		color: #FF2040;
		font-size: 0.42rem;
		font-family: "PingFangSC-Medium";
	}
	.app{
		font-size: 0.28rem;
		color: #FF2040;
		font-weight: bold;
		margin-top: 0.4rem;
		margin-bottom: 0.2rem;
	}
	.li{
		font-size: 0.24rem;
		color: #FF2040;
		margin-bottom: 0.7rem;
		font-family: "PingFangSC-Medium";
	}
	h3{
		color: #FF2040 ;
		font-size: 0.28rem;
		margin-top: 0.35rem;
		font-family: "PingFangSC-Medium";
	}
	.tu{
		padding: 0.35rem 0;
		border-bottom: 0.5px solid #FF2040 ;
	}
	.tu img{
		width: 1rem;
		height: 1rem;
		margin: 0 0.2rem 0 0;
	}
	.wang{
		color: #FF2040 ;
		font-size: 0.28rem;
		font-weight: bold;
		font-family: "PingFangSC-Medium";
		margin-top: 0.4rem;
	}
	.yb,.eb{
		color: #FF2040;
		font-size: 0.24rem;
		font-family: "PingFangSC-Medium";
		margin-top: 0.2rem;
	}
	.js{
		width: 100%;
		height: 2.21rem;
		background: #FF2040;
		margin-top: 0.3rem;
		padding: 0.32rem;
		/*color: #FFFFFF;*/
		font-size: 0.24rem;
		font-family: "PingFangSC-Regular";
		line-height: 0.34rem;
		color: rgba(255,255,255,0.7);
	}
	.sj{
		width: 0;
		height: 0;
		border-width: 0.15rem;		
		border-style: solid;	
		border-color:  transparent transparent red transparent;
		position: relative;
		top: -2.5rem;
		left: 0.5rem;
	}
</style>